<template>
    <div class="categories__wrapper">
        <div class="row g-4">
            <div v-for="(item, idx) in categoryListFour" :key="idx" class="col-lg-3 col-sm-6">
                <div class="categories__item" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
                    <div class="categories__item-inner">
                        <img :src="item.icon" alt="category icon">
                        <div class="categories__item-content">
                            <h5 class="style4">{{ item.title }}</h5>
                            <p>There are many variations of passag of Lorem Ipsum available, but the majority
                                have suffered alteration in some.</p>
                            <nuxt-link to="/course-category" class="trk-btn trk-btn--rounded trk-btn--secondary4">View
                                More
                                <span><i class="fa-solid fa-arrow-right"></i></span> </nuxt-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        categoryListFour: {
            type: Array,
            default: () => [],
        },
    }

}
</script>